<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>逆天了，集天使卡就能赢圣诞超级大礼</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=Edge">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="format-detection" content="telephone=no"/>
	<meta name="format-detection" content="email=no" />
	<meta name="W_design" content="750" />
    <script src="js/flexible_v2.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="css/animate.min.css"/>
	<style>
	canvas{
		position: absolute;
		top: 2.2rem;
		width: 7.5rem;
		height: 3.7rem;
	}
	
	</style>
	</head>
	<body>
	
	<audio src="img/music.mp3" id="bg-music" preload="auto" loop="loop" style="display: none;"></audio>
	
	<div id="app">
		<!--public-->
		<div class="public">
			<div class="logo">
				<img src="img/logo.png"/>
			</div>
			<div class="btn_gz" @click="showgz">
				<img src="img/btn_gz.png"/>
			</div>
			
			<!--弹窗遮罩-->
			<div class="mask" v-show="showMask"></div>
			
			<!--规则-->
			<div class="guize" v-show="showguize" >
				<div class="text">
					<strong>活动规则：</strong>
					<p>
						1、连线天空中的星星勾勒出你的幸运天使（3颗星以上会有奇迹出现哦），召唤男神天使卡、女神天使卡、财富天使卡、健康天使共4张天使卡:<br />
						2、用户可以通过跟好友索要来集齐天使卡；<br />
						3、集齐4张天使卡，进入抽奖环节，就有可能获得由“我的天使”提供的圣诞超级大礼；<br />
						4、每人每天有3次召唤机会，分享给朋友还有可能获得万能天使（万能天使卡可以充当4种天使卡中的任意一种）；<br />
						5、传播周期：2017年12月22日至12月25日
					</p>
					
					<strong>奖品设置：</strong>
					
					<p>
						一等奖：数码手持云台;<br />
						二等奖：4D互动立体涂色绘本；<br /> 
						三等奖：100元圣诞节京东E卡。<br />
					</p>
					
				</div>
				
				<div class="close" @click="showgz">
					<img src="img/close.png"/>
				</div>
				
			</div>
			
			<!--很遗憾！您今日召唤机会已用尽，明日再来-->
			<div class="msg" v-show="noCollectNum && xxx">
				<div class="msgBox">
					<p>很遗憾！<br />您今日召唤机会已用尽，<br />明日再来</p>
					<div class="btn" @click="showShareBtn">
						<img src="img/btn_share.png"/>
					</div>
					<p class="smallText" style="z-index: 1300;">分享好友，有机会获得一张万能天使卡</p>
				</div>
			</div>
			
			<!--分享-->
			<div class="mask" style="z-index: 1200;" v-show="showShare">
				<div class="shareArrows">
					<img src="img/jiantou.png"/>
				</div>
			</div>
			
			<!--分享成功！得卡-->
			<div class="msg" v-show="shareCard == 1">
				<div class="msgBox">
					<p>分享成功！<br />恭喜获得万能天使卡一张，<br />赶紧点击下方按钮领取！</p>
					<div class="btn" @click="shareCard=false;showMask=false">
						<img src="img/btn_lingqu.png"/>
					</div>
				</div>
			</div>
			
			<!--分享成功  不得卡-->
			<div class="msg" v-show="shareCard == 2">
				<div class="msgBox">
					<p>很遗憾！<br />您与万能天使卡失去之交臂，<br />不过别气馁，<br />关注我的天使公众号，<br />明日再战！！</p>
					<div class="yihan">
						<img src="img/ma.png"/>
					</div>
				</div>
			</div>
			
			<!--集齐成功-->
			<div class="msg" v-show="hasAllCard">
				<div class="msgBox">
					<p><strong>集齐成功</strong>恭喜您集齐4只幸运天使，<br />获得抽取圣诞大礼包的机会！</p>
					<div class="yihan" @click="goLucky">
						<img src="img/btn_choujiang.png"/>
					</div>
				</div>
			</div>
			
			<!--page3------------------------------------------------->
			
			<!--抽奖中奖-->
			<div class="msg" v-show="isWin == 1">
				<div class="msgBox">
					<p><strong>恭喜你！</strong>获得圣元“我的天使”送出的<br />{{winSrcName}}</p>
					<div class="jp">
						<img :src="'img/jp'+winSrc+'.png'" v-if="winSrc"/>
					</div>
					<div class="yihan" style="margin-top: 1rem;" @click="toform">
						<img src="img/btn_lingqu.png"/>
					</div>
				</div>
			</div>
			
			<!--抽奖不中奖    注意这个地方有3条信息-->
			<div class="msg" v-show="isWin == 2">
				<div class="msgBox">
					<p v-html="nowinCue"></p>
					<div class="btn" @click="showShareBtn">
						<img src="img/btn_share.png"/>
					</div>
					<p class="smallText" style="z-index: 1300;">分享好友，邀请好友一起集卡，<br />赢取圣诞礼物吧！</p>
				</div>
			</div>
			
			<!--提交信息-->
			<div class="msg" v-show="showForm">
				<div class="msgBox">
					<form class="form">
						<div class="">
							姓名 <input type="text" maxlength="40" v-model="name"/>
						</div>
						<div class="">
							电话 <input type="tel" maxlength="11" v-model="mobile"/>
						</div>
						<div class="">
							地址 <input type="text" maxlength="200" v-model="address"/>
						</div>
						<div class="tips">
							请准确填信息，方便我们寄送奖品！
						</div>
						<div class="yihan" style="margin-top: 1rem;" @click="toSubmit">
							<img src="img/btn_submit.png"/>
						</div>
					</form>
				</div>
			</div>
			
			<!--信息提交成功-->
			<div class="msg" v-show="submitSucess">
				<div class="msgBox">
					<p><strong>信息提交成功</strong></p>
					<div class="ma">
						<img src="img/ma.png"/>
						<p>欢迎关注“我的天使”微信公众号，活动结束5个工作日我们将公布全部获奖名单与奖品发放信息，您还有机会参加后面的活动哦。</p>
					</div>
				</div>
			</div>
			
			
			<!--分享 赢取圣诞礼物-->
			<div class="msg" style="display: none;">
				<div class="msgBox">
					<div class="shareNaifen">
						<img src="img/naifen.png"/>
					</div>
					<div class="btn">
						<img src="img/btn_share.png"/>
					</div>
					<p class="smallText" style="z-index: 1300;">分享好友，邀请好友一起集卡，<br />赢取圣诞礼物吧！</p>
				</div>
			</div>
			
			<!--送一张给好友/请好友赐这张卡-->
			<div class="mask" v-show="showSendCard">
				<div class="kaBox">
					<img id="ka" src="img/ka_cai.png"/>
				</div>
				
				<!--送一张给好友-->
				<div class="jhBtn" v-show="showSendCard == 2" @click="toSendCard(2)">
					<img src="img/btn_send.png"/>
				</div>
				
				<!--请好友赐这张卡-->
				<div class="jhBtn" v-show="showSendCard == 1" @click="toSendCard(1)">
					<img src="img/btn_yao.png"/>
				</div>
				<div class="kaNaifen">
					<img src="img/naifen.png"/>
				</div>
				
				<div class="kaClose" @click="showSendCard=false">
					<img src="img/close.png"/>
				</div>
			</div>
			
			<!--您的好友跟您索要健康卡一张-->
			<div class="kamsg" v-show="giveOrNo">
				<div class="msgBox">
					<p>
						您的好友跟您索要<br />{{weixinparam.give_card_name}}一张
					</p>
					<div class="btn left" @click="yesOrNo('1')">确认</div>
					<div class="btn right" @click="yesOrNo('2')">拒绝</div>
				</div>
			</div>
			
			<!--恭喜您获得好友赠送健康卡一张-->
			<div class="kamsg" v-show="giveInfo">
				<div class="msgBox">
					<p>
						恭喜您获得好友<br />赠送{{weixinparam.get_card_name}}一张
					</p>
				</div>
				<div class="close" @click="giveInfo = false">
					<img src="img/close.png"/>
				</div>
			</div>
			
		</div>
		
		<!--setp1 index-->
		<div class="step1 step1Bg" v-show="currentPage==1">
			<div class="title">
				<img src="img/title.png"/>
			</div>
			<div class="lingdang wow swing infinite" data-wow-duration="2s">
				<img src="img/lingdang.png"/>
			</div>
			<div class="kaBox">
				<div class="ka1">
					<img src="img/ka_nan.png"/>
				</div>
				<div class="ka2">
					<img src="img/ka_nv.png"/>
				</div>
				
				<div class="ka3">
					<img src="img/ka_cai.png"/>
				</div>
				<div class="ka4">
					<img src="img/ka_jian.png"/>
				</div>
			</div>
			<div class="sdxd">
				<div class="xuedi"></div>
				<div class="tree">
					<img src="img/tree.png"/>
				</div>
				
				<div class="laoren">
					<img src="img/laoren.png"/>
				</div>
				<div class="naifen">
					<img src="img/naifen.png"/>
				</div>
			</div>
			<div class="start wow pulse" data-wow-delay="2.5s" @click="start">
				<img src="img/btn_start1.png" />
			</div>
		</div>
		
		
		<!--setp2 -->
		<div class="step2 bg" v-show="currentPage==2">
			
			<div class="text">
				<img src="img/starText.png"/>
			</div>
			
			<div class="huabu">
				<ul class="">
					<li class="pos1">
						<img class="star1 wow" data-wow-delay="0s" src="img/star1.png"/>
						<img class="star2 wow" data-wow-delay="0s" src="img/star2.png"/>
					</li>
					<li class="pos2">
						<img class="star1 wow" data-wow-delay="0.3s" src="img/star1.png"/>
						<img class="star2 wow" data-wow-delay="0.3s" src="img/star2.png"/>
					</li>
					<li class="pos3">
						<img class="star1 wow" data-wow-delay="0.5s" src="img/star1.png"/>
						<img class="star2 wow" data-wow-delay="0.5s" src="img/star2.png"/>
					</li>
					<li class="pos4">
						<img class="star1 wow" data-wow-delay="0.6s" src="img/star1.png"/>
						<img class="star2 wow" data-wow-delay="0.6s" src="img/star2.png"/>
					</li>
					<li class="pos5">
						<img class="star1 wow" data-wow-delay="0.8s" src="img/star1.png"/>
						<img class="star2 wow" data-wow-delay="0.8s" src="img/star2.png"/>
					</li>
					<li class="pos6">
						<img class="star1 wow" data-wow-delay="0.2s" src="img/star1.png"/>
						<img class="star2 wow" data-wow-delay="0.2s" src="img/star2.png"/>
					</li>
					<li class="pos7">
						<img class="star1 wow" data-wow-delay="0s" src="img/star1.png"/>
						<img class="star2 wow" data-wow-delay="0s" src="img/star2.png"/>
					</li>
					<li class="pos8">
						<img class="star1 wow" data-wow-delay="0.5s" src="img/star1.png"/>
						<img class="star2 wow" data-wow-delay="0.5s" src="img/star2.png"/>
					</li>
					<li class="pos9">
						<img class="star1 wow" data-wow-delay="0.6s" src="img/star1.png"/>
						<img class="star2 wow" data-wow-delay="0.6s" src="img/star2.png"/>
					</li>
				</ul>
				
				<div class="lianxian wow" data-wow-delay="1s" data-wow-duration="2s">
					
					<div class="starLine starLine1 wow" data-wow-delay="1s" data-wow-duration="0.6s"></div>
					<div class="starLine starLine2 wow" data-wow-delay="1.6s" data-wow-duration="0.6s"></div>
					<div class="starLine starLine3 wow" data-wow-delay="2.2s" data-wow-duration="0.6s"></div>
					<div class="starOn starOn1 wow" data-wow-delay="1s" data-wow-duration="0.05s"><img src="img/star2.png"/></div>
					<div class="starOn starOn2 wow" data-wow-delay="1.6s" data-wow-duration="0.05s"><img src="img/star2.png"/></div>
					<div class="starOn starOn3 wow" data-wow-delay="2.0s" data-wow-duration="0.05s"><img src="img/star2.png"/></div>
					<div class="starOn starOn4 wow" data-wow-delay="2.6s" data-wow-duration="0.05s"><img src="img/star2.png"/></div>
					
					<div class="hand wow" data-wow-delay="1s" data-wow-duration="2.4s">
						<img src="img/hand.png"/>
					</div>
					
				</div>
				
				
			</div>
			<canvas id="canvas"></canvas>
			
			<div class="diaoka">
				<img src="img/diaoka.png"/>
			</div>
			
			<!--<div class="zhaohuan" @click="zhaohuan">
				<img src="img/btn_zhaohuan.png"/>
			</div>-->
			
			<div class="times">今日剩余{{collectNum}}次</div>
			
			<div class="sdxd">
				<div class="xuedi"></div>
				<div class="tree">
					<img src="img/tree.png"/>
				</div>
				
				<div class="laoren">
					<img src="img/laoren.png"/>
				</div>
				<div class="naifen">
					<img src="img/naifen.png"/>
				</div>
			</div>
			
			
			<ul class="kaUL">
				<li @click="giveCard('maleAngel')">
					<img class="kaMain" src="img/ka_nan.png"/>
					<img class="kaMask" src="img/ka_mask.png" v-show="!maleAngel"/>
					<p>男神天使</p>
					<div class="num" v-show="maleAngel">X<span>{{maleAngel}}</span></div>
				</li>
				<li @click="giveCard('godAngel')">
					<img class="kaMain" src="img/ka_nv.png"/>
					<img class="kaMask" src="img/ka_mask.png" v-show="!godAngel"/>
					<p>女神天使</p>
					<div class="num" v-show="godAngel">X<span>{{godAngel}}</span></div>
				</li>
				<li @click="giveCard('wealthAngel')">
					<img class="kaMain" src="img/ka_cai.png"/>
					<img class="kaMask" src="img/ka_mask.png" v-show="!wealthAngel"/>
					<p>财富天使</p>
					<div class="num" v-show="wealthAngel">X<span>{{wealthAngel}}</span></div>
				</li>
				<li @click="giveCard('healthAngel')">
					<img class="kaMain" src="img/ka_jian.png"/>
					<img class="kaMask" src="img/ka_mask.png" v-show="!healthAngel"/>
					<p>健康天使</p>
					<div class="num" v-show="healthAngel">X<span>{{healthAngel}}</span></div>
				</li>
			</ul>
			
			
		</div>
		
		
		<!--抽奖setp3 -->
		<div class="step3" v-show="currentPage==3">
			<!--抽奖 圣诞树-->
			<div class="cj">
				<div class="sdTree">
					<div class="">
						<div class="guang1 wow flash infinite" data-wow-duration="3s">
							<img src="img/guang1.png"/>
						</div>
						<div class="guang guang2 wow flash infinite" data-wow-delay="1s" data-wow-duration="3s">
							<img src="img/guang2.png"/>
						</div>
						<div class="guang guang3 wow flash infinite" data-wow-delay="1.5s" data-wow-duration="3s">
							<img src="img/guang2.png"/>
						</div>
						<div class="guang guang4 wow flash infinite" data-wow-delay="2s" data-wow-duration="3s">
							<img src="img/guang2.png"/>
						</div>
					</div>
					<ul class="ul">
						<li :class="'pos'+index" v-for="(index,item) in 12" @click="choujiang">{{index}}</li>
					</ul>
				</div>
				<p>快使用洪荒之力点击圣诞树上的彩球，<br />赢抽你的专属大礼包！</p>
			</div>
			<div class="sdxd">
				<div class="xuedi"></div>
				<div class="tree">
					<img src="img/tree.png"/>
				</div>
				
				<div class="laoren">
					<img src="img/laoren.png"/>
				</div>
				<div class="naifen">
					<img src="img/naifen.png"/>
				</div>
			</div>
		</div>
		
		
	</div><!--end app-->
	
	<script src="js/zepto.min.js"></script>
	<script src="js/vue.js"></script>
	
	<script src="js/wow.js"></script>
	<!--加载雪花-->
	<script src="img/jsized.snow.min.js"></script>
	<script src = "https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
	<script type="text/javascript">
    window.configs = {
        getURL: function () {
            return '';//接口地址
        },
    };
		//music
		var ua = window.navigator.userAgent.toLowerCase();
		var audio = document.getElementById('bg-music');
		document.addEventListener('DOMContentLoaded', function () {
			function audioAutoPlay() {
				
				if(audio) {
					audio.play();
					if (ua.match(/MicroMessenger/ig) == 'micromessenger') {
						document.addEventListener("WeixinJSBridgeReady", function () {
							audio.play();
						}, false);
					}
				}
			}
			audioAutoPlay();
		});
		
		//init wow
		new WOW().init();
		
		//加载雪花
		createSnow('', 20);
		var drawPoints =[];//连线点
		//vue	
		new Vue({
			el:'#app',
			data:{
				currentPage:1,//当前页

				showMask:false,//弹窗遮罩
				showguize:false,//显示规则
				canCollect:false,//是否能收集
				
				collectNum:3,//剩余召唤次数
				noCollectNum:false,//召唤次数为0提示
				
				maleAngel:0,//男神天使卡数量
				godAngel:0,//女神天使卡数量
				wealthAngel:0,//财富天使卡数量
				healthAngel:0,//健康天使卡数量


				showShare:false,//显示分享箭头
				
				shareCard:0,//分享后是否得卡 1得卡 2不得卡
				
				
				isWin:false,//是否中奖 1中奖 2不中奖
				winSrc:'',//中奖图片
				winSrcName:'',//奖品名称
				
				showSendCard:0,//是否显示  2赐卡 1要卡
				
				noWinText:[//未中奖话术
					"今日圣诞老人没有到达，<br />那只调皮的麋鹿可能迷路了~~<br />不过别气馁，<br />明日再来！",
					"你的脑洞无限大，<br />圣诞老人可能没追上你的节奏~~<br />不过别气馁，<br />明日再来！",
					"快乐的雪橇还在飞驰，吉祥的驯鹿还在奔跑，圣诞的礼物还在送达，别着急，明日再来！"
				],
				showForm:false,//是否显示表单
				
				name:'',//姓名
				mobile:'',//手机号码
				address:'',//地址
				submitSucess:false,//是否提交表单成功
				weixinparam:{},//微信分享参数
				isDraw:false,//是否画线  连接3点
				cur_card:'',//当前卡id
				giveInfo:false,//好友送卡提示
				giveOrNo:false,//是否赠卡给好友
				xxx:false,//隐藏没机会弹出
			},
			
			computed:{
				//随机弹出未中奖话术
				nowinCue:function(){
					var self=this;
					return self.noWinText[self.randomNum(0,2)];
				},
				//卡片集齐
				hasAllCard:function(){
					return this.maleAngel>0 && this.godAngel>0 && this.wealthAngel>0 && this.healthAngel>0 && this.currentPage == 2;
				},
				
			},
			mounted: function(){
				var self=this;
				//获取分享参数
				self.getparam();
			},
			methods:{
				//取随机数
				randomNum:function(minNum,maxNum){
					switch(arguments.length){
		                case 1:
		                    return parseInt(Math.random()*minNum+1,10);
		                	break;
		                case 2:
		                    return parseInt(Math.random()*(maxNum-minNum+1)+minNum,10);
		                	break;
		                default:
		                   return 0;
		            }
				},
				
				//显示隐藏规则
				showgz: function(){
					this.showguize=!this.showguize;
					this.showMask=!this.showMask;
				},
		       //开始收集
		        start: function(){
					var self=this;
		        	this.currentPage=2;
		            removeSnow();//移除雪花
		        	$("img[src*='snow']").hide();
					setTimeout(function(){
						//画图初始化
						self.drawStart();	
						
					},100)

		        },
				//画图
				drawStart:function(){
					var self =this;
					var canvas = document.getElementById("canvas");
					canvas.width = $(window).width();
					canvas.height = parseFloat($('html').css("font-size"))*3.7;
					var ctx = canvas.getContext("2d");
					ctx.lineWidth = 1;
					ctx.strokeStyle = 'rgba(4, 228, 255, 0.94)';
					
					
					
					var position = [
						{
							x:parseInt($('.pos1').position().left+$('.pos1').find(".star1").width()/2),
							y:parseInt($('.pos1').position().top+($('.pos1').find(".star1").height()-8)/2)
						},
						{
							x:parseInt($('.pos2').position().left+$('.pos2').find(".star1").width()/2),
							y:parseInt($('.pos2').position().top+($('.pos2').find(".star1").height()-8)/2)
						},
						{
							x:parseInt($('.pos3').position().left+$('.pos3').find(".star1").width()/2),
							y:parseInt($('.pos3').position().top+($('.pos3').find(".star1").height()-8)/2)
						},
						{
							x:parseInt($('.pos4').position().left+$('.pos4').find(".star1").width()/2),
							y:parseInt($('.pos4').position().top+($('.pos4').find(".star1").height()-8)/2)
						},
						{
							x:parseInt($('.pos5').position().left+$('.pos5').find(".star1").width()/2),
							y:parseInt($('.pos5').position().top+($('.pos5').find(".star1").height()-8)/2)
						},
						{
							x:parseInt($('.pos6').position().left+$('.pos6').find(".star1").width()/2),
							y:parseInt($('.pos6').position().top+($('.pos6').find(".star1").height()-8)/2)
						},
						{
							x:parseInt($('.pos7').position().left+$('.pos7').find(".star1").width()/2),
							y:parseInt($('.pos7').position().top+($('.pos7').find(".star1").height()-8)/2)
						},
						{
							x:parseInt($('.pos8').position().left+$('.pos8').find(".star1").width()/2),
							y:parseInt($('.pos8').position().top+($('.pos8').find(".star1").height()-8)/2)
						},
						{
							x:parseInt($('.pos9').position().left+$('.pos9').find(".star1").width()/2),
							y:parseInt($('.pos9').position().top+($('.pos9').find(".star1").height()-8)/2)
						},
					]
					
					console.log(position)
					
					canvas.addEventListener('touchstart',function(event){//触摸点按下事件
						event.preventDefault();
						if (event.targetTouches.length == 1) {
							if(self.isDraw){
								return;
							}
							var touch = event.targetTouches[0];
							ctx.moveTo(touch.clientX-canvas.offsetLeft,touch.clientY-canvas.offsetTop);
							drawPoints.push({x:touch.clientX-canvas.offsetLeft,y:touch.clientY-canvas.offsetTop})
							
							canvas.addEventListener('touchmove',function (event) {//手机拖动触摸点事件
								event.preventDefault();
								if(self.isDraw){
									return;
								}
								ctx.clearRect(0,0,canvas.width,canvas.height);
								
								ctx.beginPath();
								ctx.moveTo(touch.clientX-canvas.offsetLeft,touch.clientY-canvas.offsetTop);
								
								var touche = event.targetTouches[0];
								ctx.lineTo(touche.clientX - canvas.offsetLeft, touche.clientY - canvas.offsetTop);
								
								console.log(touche.clientX,touche.clientY - canvas.offsetTop);

								 for(var i=0;i<position.length;i++){
									 
									 if(Math.abs(touche.clientX - canvas.offsetLeft-position[i].x)<10 && Math.abs(touche.clientY - canvas.offsetTop-position[i].y)<10){
									
										if(drawPoints[drawPoints.length-1].x!=position[i].x){
											drawPoints.push({x:position[i].x,y:position[i].y});
										}
										
									 }
								 }

								console.log(drawPoints);
								for(var i=0;i<drawPoints.length;i++){
									
									if(i==0){
										ctx.beginPath();
										ctx.moveTo(drawPoints[0].x, drawPoints[0].y)
									}
									ctx.lineTo(drawPoints[i].x, drawPoints[i].y);
									ctx.stroke();
								}
								
								ctx.lineTo(touche.clientX - canvas.offsetLeft, touche.clientY - canvas.offsetTop);

								ctx.stroke();
								//ctx.restore(); 
							},false)
							
							canvas.addEventListener('touchend',function (event) {//手机离开屏幕的事件
								//ctx.closePath();
								
								self.isDraw = true;//画线通过
								
								
								
								//$(".huabu ul li .star1").css("opacity","0");
								//$(".huabu ul li .star2").css("opacity","1");
								
								
								if(this.collectNum == 0){//剩余召唤次数为0
									if(type != 5){
										this.noCollectNum = true;
										this.showMask =true;
										self.xxx = true;
									}else{
										this.noCollectNum = false;
										this.showMask =false;
										self.xxx = false;
									}
					        	}else{
									if(!self.isDraw){
										alert("请连线天空中的星星")
										return;
									}
									if(drawPoints.length<3){
										alert("请连线至少3颗星星")
										//重置画布
										self.isDraw = false;
										var canvas = document.getElementById("canvas");
										var ctx=canvas.getContext("2d");
										var width = $(window).width();
										var height = parseFloat($('html').css("font-size"))*3.7;
										ctx.fillRect(0,0,width,height);
										ctx.clearRect(0,0,width,height);
										drawPoints = [];
										
										return;
									}
									
									
									$(".huabu ul li img").hide(0);
									$(".huabu ul li img").attr("data-wow-delay","0.1s");
									$(".huabu ul li img").show(0);
									
									//调用召唤接口并同步卡片数量-------
									self.toZhaoHuan();
					        	}
								
								
								
							},false)

						}
					},false)
				
				},
		        //开始召唤
		        zhaohuan:function(){
		        	var self =this;
					
		        	if(this.collectNum == 0){//剩余召唤次数为0
						if(type != 5){
							this.noCollectNum = true;
							this.showMask =true;
							self.xxx = true;
						}else{
							this.noCollectNum = false;
							this.showMask =false;
							self.xxx = false;
						}
		        	}else{
						if(!self.isDraw){
							alert("请连线天空中的星星")
							return;
						}
						if(drawPoints.length<3){
							alert("请连线至少3颗星星")
							//重置画布
							self.isDraw = false;
							var canvas = document.getElementById("canvas");
							var ctx=canvas.getContext("2d");
							var width = $(window).width();
							var height = parseFloat($('html').css("font-size"))*3.7;
							ctx.fillRect(0,0,width,height);
							ctx.clearRect(0,0,width,height);
							drawPoints = [];
							
							return;
						}
						
						
						$(".huabu ul li img").hide(0);
						$(".huabu ul li img").attr("data-wow-delay","0.1s");
						$(".huabu ul li img").show(0);
						
						//调用召唤接口并同步卡片数量-------
						self.toZhaoHuan();
		        	}
		        	
		        },
				//调用召唤接口
				toZhaoHuan:function(type){
					var self =this;
					var typeCard = self.randomNum(1,4);
					$(".diaoka").removeClass("diaokaDh1");
					$(".diaoka").removeClass("diaokaDh2");
					$(".diaoka").removeClass("diaokaDh3");
					$(".diaoka").removeClass("diaokaDh4");
					
					//调用召唤接口并同步卡片数量-------
					$.ajax({
						url:configs.getURL() + '/site/card',
						type : "POST",
						data :{
							id:type || typeCard,//天使ID 1 2 3 4 5
						},
						dataType : "json",
						success:function(result){
							
							//重置画布
							self.isDraw = false;
							var canvas = document.getElementById("canvas");
							var ctx=canvas.getContext("2d");
							var width = $(window).width();
							var height = parseFloat($('html').css("font-size"))*3.7;
							ctx.fillRect(0,0,width,height);
							ctx.clearRect(0,0,width,height);
							drawPoints = [];
							if (result.ret == 1) {//1成功 2
								var card = result.data;

								self.maleAngel = parseInt(card['1']);
								self.godAngel = parseInt(card['2']);
								self.wealthAngel = parseInt(card['3']); 
								self.healthAngel = parseInt(card['4']); 
								if(type == 5){//召唤万能卡成功shareCard 1得卡 2不得卡
									self.showShare = false;//隐藏分享
									self.shareCard =1;
									self.showMask =true;
									self.xxx = false;
								}else{
									
									$(".diaoka").removeClass("diaokaDh"+typeCard).addClass("diaokaDh"+typeCard);
									 
								}
								self.getparam();//同步卡片数据 召唤次数

							}else if(result.ret == 2){//召唤每天超过三次(非万能卡) 万能卡超过一次
								if(type == 5){//召唤万能卡失败
									self.showShare = false;//隐藏分享
									self.shareCard =2;
									self.showMask =true;
									self.xxx = false;
								}else{
									self.noCollectNum = true;
									self.showMask =true;
								}

							}else{//0 失败 
								alert("召唤失败！")
							}
						}
					})
					
				},
				
		        //显示分享界面
		        showShareBtn:function(){
		        	this.showMask = false;
		        	this.showShare = true;
		        },
		        //去抽奖
		        goLucky:function(){
		        	this.currentPage=3;
		        },
		        //点击抽奖-------
		        choujiang:function(){
		        	var self =this;
		        	
					$.ajax({
						url:configs.getURL() + '/site/play',
						type : "POST",
						data :'',
						dataType : "json",
						success:function(result){

							if (result.ret > 0&& result.ret!=501&&result.ret!=502&&result.ret!=508) {//成功 //1中奖  2不中奖     奖品的ID
								
								if(result.ret == 1){//一等奖
									self.winSrcName = "全高清数码摄影机一台！";
									self.winSrc = '1';
								}else if(result.ret == 2){//二等奖
									self.winSrcName = "圣诞磁性过家家套装一套！";
									self.winSrc = '2';
								}else{//三等奖
									self.winSrcName = "100元圣诞节京东E卡一张！";
									self.winSrc = '3';
								}
								self.isWin = 1;
							
							}else if(result.ret == 501){//卡片有没有集齐
								self.isWin = 2;
							}else if(result.ret == 502){//今天已经抽过奖
								self.isWin = 2;
							}else if(result.ret == 508){//今天已经中过奖了
								self.isWin = 2;
							}else{//失败
								self.isWin = 2;
							}
						}
					})
		        },
		        //去领奖
		        toform:function(){
					var self =this;
					if(self.weixinparam.reg != '1'){//没登记过 '0':没有登记过   '1':登记过
						this.showForm = true;
					}
		        	
		        },
		        //点击提交
		        toSubmit:function(){
		        	var self =this;

	        		if(!self.name){
        				alert("姓名不能为空")
        				return;
	        		}

	        		if(!self.mobile){
        				alert("手机号码不能为空")
        				return;
	        		}
	        		if(!self.address){
        				alert("地址不能为空")
        				return;
	        		}

	        		if(!/^1[0-9]{10}$/ig.test(self.mobile)){
	        			alert("手机号码格式不正确")
	        			return;
	        		}
		        	
					$.ajax({
						url:configs.getURL() + '/site/register',
						type : "POST",
						data :{
							'username':self.name,//姓名
							'mobile':self.mobile,//手机号
							'address':self.address,//地址
						},
						dataType : "json",
						success:function(result){

							if (result.ret == 1) {//成功 
								self.submitSucess = true;//提交成功
							}else if(result.ret == 2){//机号已经登记过
								alert("您的手机号码已经登记过了，请更换手机号码")
							}else{//失败
								alert("登记失败，请稍后重试")
							}
						}
					})
		        },
		        //给卡或要卡 2赐卡 1要卡
		        giveCard:function(flag){
					var self = this;
		        	switch(flag){
						case 'maleAngel'://男神天使
							self.cur_card = 1;
							break;
						case 'godAngel'://女神天使
							self.cur_card = 2;
							break;
						case 'wealthAngel'://财富天使
							self.cur_card = 3;
							break;
						case 'healthAngel'://健康天使
							self.cur_card = 4;
							break;
						default:
							self.cur_card = '';
					}
		        	if(this[flag] > 0){// 判断当前卡片数量  2赐卡 1要卡
		        		
		        		this.showSendCard = 2;
		        	}else{
		        		this.showSendCard = 1;
		        	}
					
					var imgUrl = $(".kaMain").eq(self.cur_card-1).attr("src");
			    				    	
			    	$("#ka").attr("src",imgUrl);
		        },
		        //点击要卡、赐卡
		        toSendCard:function(type){//2赐卡 1要卡  3333333333
					var self = this;
					//初始化分享参数
					self.getparam(type);//1要卡  2赐卡
					self.showShareBtn();//显示分享箭头
		        },
				//给卡或不给
				yesOrNo:function(flag){//1 给  2不给
					var self = this;
					if(flag == '1'){
						$.ajax({
							url:configs.getURL() + '/site/give',
							type : "POST",
							data :{
								'user_id':self.weixinparam.give_user_id, //赠送的用户ID
								'card_id':self.weixinparam.give_card_id //天使卡的ID
							},
							dataType : "json",
							success:function(result){
								if (result.ret == 1) {
									//同步卡片数据
									self.maleAngel = parseInt(result.data['1']);
									self.godAngel = parseInt(result.data['2']);
									self.wealthAngel = parseInt(result.data['3']); 
									self.healthAngel = parseInt(result.data['4']); 
								}else{
									alert("网络错误")
								}
							}
						})
					}
					self.giveOrNo = false;

				},
		        //取分享等参数接口 可以重复调用    shareCard 1 2
		        getparam: function (type) {
					var self = this;
					$.ajax({
						url:configs.getURL() + '/site/getparam',
						type : "POST",
						data :{ 
							'url': location.href,
							'type':(self.showSendCard&&type)?type:'', //0 默认分享 1请好友赐天使卡 2 送好友天使卡
							'card_id':self.showSendCard?self.cur_card:'',// 要哪张卡 id 只有要卡赠卡界面显示才赋值
						},
						dataType : "json",
						success:function(result){

							if (result.ret == 1) {
								self.weixinparam = result.data;
								self.collectNum = self.weixinparam.card_num || 0;//同步剩余召唤次数
								
								self.maleAngel = parseInt(self.weixinparam.cards['1']);
								self.godAngel = parseInt(self.weixinparam.cards['2']);
								self.wealthAngel = parseInt(self.weixinparam.cards['3']); 
								self.healthAngel = parseInt(self.weixinparam.cards['4']); 
								
								//判断弹出什么提示
								if(self.currentPage ==1){
									if(self.weixinparam.give == 1){//要卡
										self.giveOrNo=true;//是否赠卡给好友
										self.giveInfo=false;//好友送卡提示
									}else if(self.weixinparam.get == 1){//得卡提示
										self.giveOrNo=false;//是否赠卡给好友
										self.giveInfo=true;//好友送卡提示
									}
								}
								if(self.weixinparam.win=='1' &&self.weixinparam.reg =='0'){//中奖没填信息 直接到表单页
									self.currentPage = 2;
									self.showForm = true;
								}
								
								
								
				                wx.config({
				                    debug: false,
				                    appId: self.weixinparam.appId, // 必填，公众号的唯一标识
				                    timestamp: self.weixinparam.timestamp, // 必填，生成签名的时间戳
				                    nonceStr: self.weixinparam.nonceStr, // 必填，生成签名的随机串
				                    signature: self.weixinparam.signature, // 必填，签名，见附录1
				                    jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage']
				                });
				                wx.ready(function () {
				
				                    wx.onMenuShareTimeline({
				                        title: self.weixinparam.title, // 分享标题
				                        link: self.weixinparam.link, // 分享链接
				                        imgUrl: self.weixinparam.imgUrl, // 分享图标
				                        success: function success() {
											
											if(self.currentPage==2 && self.noCollectNum){//在第二页并且 没有剩余召唤次数  ?????????
												$.ajax({
													url:configs.getURL() + '/site/share',
													type : "POST",
													data :'',
													dataType : "json",
													success:function(result){
														if (result.ret == 1) {
															//调用召唤接口并同步卡片数量-------
															self.toZhaoHuan(5);
														}
													}
												})
											}
											
											if(type==1||type==2){
												location.reload();	
											}
				                        },
				                        cancel: function cancel() {}
				                    });
				                    wx.onMenuShareAppMessage({
				                        title: self.weixinparam.title, // 分享标题
				                        desc: self.weixinparam.desc, // 分享描述
				                        link: self.weixinparam.link, // 分享链接
				                        imgUrl: self.weixinparam.imgUrl, // 分享图标
				                        type: 'link', // 分享类型,music、video或link，不填默认为link
				                        dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
				                        success: function success() {
											if(self.currentPage==2 && self.noCollectNum){//在第二页并且 没有剩余召唤次数       ?????????
												$.ajax({
													url:configs.getURL() + '/site/share',
													type : "POST",
													data :'',
													dataType : "json",
													success:function(result){
														if (result.ret == 1) {
															//调用召唤接口并同步卡片数量-------
															self.toZhaoHuan(5);
														}
													}
												})
											}
											if(type==1||type==2){
												location.reload();	
											}
											
				                        },
				                        cancel: function cancel() {}
				                    });
				                })
							}
						}
					});
		        },
			},
		})
	</script>     
	</body>
</html>